@import '~styles/colors';
@import '~styles/variables';

$modal-padding: $default-padding;
$modal-border-radius: 2 * $default-border-radius;
$modal-shadow: 0 7px 16px 0 rgba(0, 0, 0, 0.1);
$modal-background-color: $bg-color-white;

:global(.is-blurred) {
	filter: blur(2px);
}

.modal__overlay {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	background-color: $overlay-bg-color;
}

.modal {
	position: fixed;
	top: 50%;
	left: 50%;

	overflow-y: auto;

	min-width: 150px;
	max-width: 80%;
	height: auto;
	max-height: 80%;
	padding: $modal-padding;

	transform: translate(-50%, -50%);

	border-radius: $modal-border-radius;
	background-color: $modal-background-color;
	box-shadow: $modal-shadow;

	&--animated {
		animation-name: fadeInUp;
		animation-duration: $default-time-animation;
	}
}

.modal__message {
	margin-bottom: 1.75rem;

	text-align: center;

	color: $color-text-dark;

	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
}

@keyframes fadeInUp {
	0% {
		transform: translate3d(-50%, 100%, 0);

		opacity: 0;
	}

	to {
		transform: translate(-50%, -50%);

		opacity: 1;
	}
}
